// 定义颜色和字体变量
@text-main: #303133;
@text-regular: #606266;
@text-secondary: #909399;
@text-placeholder: #c0c4cc;
@theme-primary: #19be6b;
@theme-primary-deep: #18b566;
@color-danger: #f56c6c;
@color-warning: #f9ae3d;

@font-lg: 28rpx;
@font-md: 26rpx;
@font-sm: 24rpx;
@font-xs: 22rpx;

// 定义淡入动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 页面基础样式
page {
  background-color: #f5f6fa;
  color: @text-regular;
  font-size: @font-md;
}

.page-container {
  padding: 24rpx;
  padding-bottom: 160rpx; // 为悬浮按钮留出空间
}

// 物品卡片
.item-list {
  .item-card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 30rpx;
    transition: all 0.2s ease-in-out;
    animation: fadeIn 0.5s ease-out forwards;

    &:active {
      transform: scale(0.98);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .item-name {
        font-size: @font-lg;
        color: @text-main;
        font-weight: bold;
      }
    }

    .card-body {
      padding: 20rpx 0;

      .info-row {
        display: flex;
        align-items: center;
        font-size: @font-sm;
        line-height: 1.8;

        .label {
          color: @text-secondary;
          width: 160rpx;
        }

        .value {
          color: @text-regular;

          &.strong {
            font-weight: bold;
            color: @text-main;
          }

          &.price {
            color: @color-warning;
            font-weight: bold;
          }
        }
      }
    }

    .card-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: 20rpx;
      margin-top: 10rpx;
      border-top: 1rpx solid #f0f0f0;

      .action-btn {
        font-size: @font-sm;
        margin-left: 20rpx;
      }
    }
  }
}

// 空状态
.empty-container {
  padding-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-img {
    width: 280rpx;
    height: 280rpx;
  }

  .empty-text {
    margin-top: 20rpx;
    font-size: @font-sm;
    color: @text-secondary;
  }
}

// 悬浮新增按钮
.fab-add {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, @theme-primary, @theme-primary-deep);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 16rpx rgba(25, 190, 107, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;

  &:active {
    transform: scale(0.9);
  }
}

// 表单弹窗样式
.form-container {
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .form-title {
    font-size: 32rpx;
    color: @text-main;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }

  form {
    flex: 1;
    overflow-y: auto;
  }

  .form-item {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;
    font-size: @font-md;

    .form-label {
      width: 200rpx;
      color: @text-main;
      flex-shrink: 0;

      &.required::before {
        content: '*';
        color: @color-danger;
        margin-right: 6rpx;
      }
    }

    .form-input,
    .form-textarea {
      flex: 1;
      font-size: @font-md;
      color: @text-regular;
    }

    .form-textarea {
      height: 120rpx;
      padding-top: 5rpx;
      line-height: 1.5;
    }

    .form-picker {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .placeholder-style {
      color: @text-placeholder;
    }

    switch {
      transform: scale(0.8) translateX(10rpx);
    }
  }

  .form-submit-wrapper {
    margin-top: 40rpx;
    padding: 0 20rpx;
  }
}